// 动画组件
import React from 'react';
import { CSSTransition } from "react-transition-group";
import { CSSTransitionProps } from "react-transition-group/CSSTransition";
// 定义动画名称
type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right';
interface _transitionProps {
    animation?: AnimationName;
    wrapper?: boolean;
}
type TransitionProps = Partial<_transitionProps & CSSTransitionProps>;

const Transition: React.FC<TransitionProps> = (props) => {
    const { animation, wrapper, children, classNames, ...restProps } = props;
    // 确保 addEndListener 不会被传递
    // CSSTransition 的 addEndListener 属性是一个必须的函数类型，用于在动画结束时执行回调。
    // 如果你没有显式传递 addEndListener，TypeScript 会认为它可能是 undefined，从而导致类型不匹配。
    // 如果你不需要使用 addEndListener，可以在 restProps 中排除它，避免传递给 CSSTransition
    const { addEndListener, ...safeRestProps } = restProps as any;
    return (
        <CSSTransition classNames={classNames ? classNames : animation} {...safeRestProps}>
            {/* CSSTransition已经为children添加了节点验证 */}
            {wrapper ? <div>{children as React.ReactNode}</div> :  children }
        </CSSTransition>
    );
}
Transition.defaultProps = {
    unmountOnExit: true,
    appear: true,
};
export default Transition;